Skip to content

fix: Remove left margin on sidebar-inset when variant=inset, state=collapsed and collapsible=icon #2339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: Remove left margin on sidebar-inset when variant=inset, state=collapsed and collapsible=icon #2339

wants to merge 3 commits into from

Conversation

@ma-r-s
Copy link

@ma-r-s ma-r-s commented Oct 9, 2025

Problem
When variant="inset", state="collapsed", and collapsible="icon", the sidebar becomes misaligned due to the inset's left margin.

Solution
Added the following Tailwind utility to remove the margin in this specific state:
md:peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[collapsible=icon]:ml-0

Result
This ensures the sidebar aligns correctly in this specific situation.

Testing

  1. Set variant="inset" and collapsible="icon" on the sidebar.
  2. Collapse it.
  3. Sidebar now remains properly aligned.

@ma-r-s
Adds styling to remove left margin (ml-0) on larger than medium scree…
c671873 
…ns when

sidebar is in inset variant, collapsed state, and icon collapsible mode.
@changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 8e8e7b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI review requested due to automatic review settings October 23, 2025 20:21
Copilot AI reviewed Oct 23, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a sidebar alignment issue when using specific configuration options. When the sidebar is configured with variant="inset", state="collapsed", and collapsible="icon", the inset's left margin causes misalignment.

Key Changes:

  • Added a Tailwind utility class to override the left margin specifically when all three conditions are met (variant=inset, state=collapsed, collapsible=icon)

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ma-r-s